<template>
  <div class="tab-bar">
    <slot></slot>
  </div>
</template>
<script setup>
// 引入hooks中的useChildren
import useChildren from '../hooks/useChildren.js'
const { linkChildren } = useChildren('TabBar')
// 接收v-model绑定的属性值
const props = defineProps({
  active: {
    type: Number,
    default: 0,
  },
})
//注册自定义事件
const emit = defineEmits(['update:active'])
// 使用linkChildren方法共享状态和方法(linkChildren方法的其中一个作用)
linkChildren({
  props,
  // 将触发自定义事件的setActive方法共享给子组件
  setActive(value) {
    emit('update:active', value)
  },
})
</script>
<style scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  height: 40px;
  background-color: skyblue;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
}
</style>
